import React, { useState } from 'react';
import { Input, Button, Checkbox, message } from 'antd';
import './Login.css';
import axios from 'axios';
import { useNavigate } from "react-router-dom";

export default function Login() {
    // 初始化表单数据
    const [userData, setUserData] = useState({
        username: '',
        password: '',
        checked: false,
    });

    // 用户名变化
    const handleUsernameChange = (e) => {
        setUserData({ ...userData, username: e.target.value });
    };

    // 密码变化
    const handlePasswordChange = (e) => {
        setUserData({ ...userData, password: e.target.value });
    };

    // 复选框变化
    const handleCheckboxChange = (e) => {
        setUserData({ ...userData, checked: e.target.checked });
    };
    const navigate = useNavigate();
    // 点击登录
    const handleLogin = (e) => {
        if (userData.username === '' || userData.password === '') {
            message.warning('用户名或密码不能为空！');
        } else if (!userData.checked) {
            message.warning('请阅读并同意服务协议和隐私政策！');
        } else {
            axios.post('http://8.148.7.123:8000/users/login', {
                account: userData.username,
                password: userData.password,
            }).then(res => {
                // console.log(res)
                if(res.data.code === 0){
                    message.error(res.data.msg)
                }else if(res.data.code === 1){
                    message.success(res.data.msg)
                    localStorage.setItem('dr_id', res.data.id)
                    setTimeout(()=>{
                        navigate('/home')
                    },1000)
                }
            }).catch(err => {
                console.error(err)
            })
        }

    };

    return (
        <div className="login_bg">
            <div className="login_box">
                <h2 className='login_title'>东软医院HIS信息管理平台</h2>
                <form>
                    <div>
                        <Input
                            placeholder="请输入您的用户名/邮箱"
                            value={userData.username}
                            onChange={handleUsernameChange}
                            style={{ width: '300px', marginBottom: '10px' }}
                        />
                    </div>
                    <div>
                        <Input
                            type="password"
                            placeholder="请输入您的密码"
                            value={userData.password}
                            onChange={handlePasswordChange}
                            style={{ width: '300px', marginBottom: '10px' }}
                        />
                    </div>
                    <div>
                        <Button type="primary" style={{ width: '300px' }} onClick={handleLogin}>下一步</Button>
                    </div>
                    <div>
                        <p className="login_protocol">
                            <Checkbox
                                checked={userData.checked}
                                onChange={handleCheckboxChange}
                                style={{ verticalAlign: 'middle', marginRight: '10px' }}
                            />
                            我已阅读并同意 <a>服务协议</a> 和 <a>隐私政策</a>
                        </p>
                    </div>
                    <div className="login_copyright">
                        <span>——————</span>
                        <span>&emsp;版权所有&emsp;</span>
                        <span>——————</span>
                    </div>
                </form>
            </div>
        </div>
    );
}